<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
	<title><%=ProConfig.PROJECT_NAME %></title>
	<%@ include file="/WEB-INF/wechat/iot/common/resource_lib.jsp"%>
	
	<style type="text/css">
		body, html {
		    height: 100%;
		    -webkit-tap-highlight-color: transparent;
		}
		p.weui-tabbar__label{
			color:#999 !important ;
		}
		.weui-tabbar__icon {
		    width: 24px;
		    height: 24px;
		}
		.weui-tabbar__icon.active img.active{
			display: block;
		}
		.weui-tabbar__icon.active img{
			display: none;
		}
		.weui-tabbar__icon img{
			display: block;
		}
		.weui-tabbar__icon img.active{
			display: none;
		}
		.tab{
			border:1px solid #0d72c8;
			color:#0d72c8;
			font-size: 15px;
		}
		.tab.active{
			background: #0d72c8;
			color: #fff;
		}
		.alarm-container{
			width:90%;
			padding:5px 10px;
			background: #fff;
			margin-top: 8px;
			border-radius: 10px;
			font-size: 14px;
		}
		.top-operate{
			padding: 10px 0px;
		    position: fixed;
		    width: 100%;
		    background: #fafafa;
		    z-index: 1000;
		}
	</style>
</head>
<body>
	<div class="weui-tab">
		<div class="body-container" style="height: 100%;overflow: auto;">
			<div class="border-bottom top-operate">
				<div class="m-auto clear t-c" style="width:60%;">
					<div class="float-left width50">
						<div class="tab active" tag="46" style="border-right: 0;border-radius: 15px 0 0 15px;">
							<span>Unread alarm</span>
						</div>
					</div>
					<div class="float-left width50">
						<div class="tab" tag="47" style="border-radius:  0 15px 15px 0;">
							<span>Historical alarm</span>
						</div>
					</div>
				</div>
			</div>
			
			<div style="height:52px;width: 100%;"></div>
			
			<div style="background: #fff;">
				<select class="weui-select jui-selecter scene_id" data-options="'method':'POST','url':'/page/scene?paged=1&pageSize=100','key':'id','value':'name',
													'init_value':'Please select item','type':'page'"  style="width: 100%;">
					
				</select><br>
				<select class="weui-select node-select" data-options="'method':'POST','url':'/page/node?paged=1&pageSize=100', 'data': {scene_id:'$.scene_id$'},'key':'id','value':'name',
													'init_value':'Please select device','type':'page'"  style="width: 100%;">
					<option value="">Please select device</option>
				</select>
			</div>
			
			<div class="container">
			</div>
			<%@ include file="/WEB-INF/wechat/iot/common/pager.jsp"%>
			<div style="height: 50px;width: 100%;"></div>
		</div>
		<%@ include file="/WEB-INF/wechat/iot/moudle/operate.jsp"%>
	</div>
	<div id="template" class="hide">
		<div class="alarm-container m-auto">
			<div class="border-bottom" style="height: 40px;line-height: 40px;" tag="{3}">
				<span>{0} / <span style="color:#333;opacity: 0.5;">{1}</span></span>
				<span class="float-right" style="color:#333;opacity: 0.5;line-height:40px;"></span>
				<span class="float-right arrow-right" style="color:#333;opacity: 0.5;" onclick="forward('/wiot/alarm_detail?id={3}')" >View details</span>
			</div>
<%-- 			<c:if test="${user.type == 7 }"> --%>
<!-- 				<div class="p-10" style="padding: 10px;color:#615e5a;opacity: 0.8;">  -->
<!-- 					{2} -->
<!-- 				</div> -->
<%-- 			</c:if> --%>
			
<%-- 			<c:if test="${user.type == 10 || user.type == 8 }"> --%>
				<div class="p-10 border-bottom" style="padding: 10px;color:#615e5a;opacity: 0.8;"> 
					{2}
				</div>
				<div class="clear" style="padding: 8px 0;"> 
					<div class="float-left width50 t-c solvebtn" tag="{3}" onclick="solveAlarm(this)">
						<div style="border-right: 1px solid #d9d9d9;">
							<span style="color: #3499da;opacity: 0.7;">handle</span>
						</div>
					</div>
					<div class="float-left width50 t-c deletebtn" tag="{3}" onclick="deleteAlarm(this)" >
						<span style="color: red;opacity: 0.7;">delete</span>
					</div>
				</div>
<%-- 			</c:if> --%>
			
		</div>
	</div>

</body>
<script type="text/javascript">
	$(".weui-tabbar .weui-tabbar__icon").eq(1).addClass("active");
	
	function deleteAlarm(obj){
		commonAjax("DELETE",localUrl+"/alarm.json?id="+$(obj).attr('tag'), "",function(data){
			if(isOK(data)){
				$.toptip('Successfully deleted', 'success'); 
				setTimeout(function() {
					$(obj).parent().parent().hide(200);
				}, 300);
			}
		});
	}
	function solveAlarm(obj){
		commonAjax('PUT',localUrl+'/alarm.json', {iot_alarm_process_status:47,id:$(obj).attr('tag')},function(data){
			if(isOK(data)){
				$.toptip('Successful processing', 'success');
				setTimeout(function() {
					$(obj).parent().parent().hide(200);
				}, 300);
			}	
		})
	}
	
	
	
	$(function(){
		$(".tab").click(function(){
			if( $(this).hasClass("active") ){
				return ;
			}else{
				$(".tab").removeClass("active");
				$(this).addClass("active");
				if($(this).attr("tag") == 46 ){
					data["iot_alarm_process_status"] = 46 ;
					$(".solvebtn").show();
					$(".deletebtn").css("width","50%");
				}else{
					data = {} ;
					$(".solvebtn").hide();
					$(".deletebtn").css("width","100%");
				}
				paged = 1;
				$(".container").empty();
				pagerorgin();
				getData(paged++);
			}
		})
		
		$(".scene_id").change(function(){
			var selectors = $('.node-select') ;
	 		init_select( getConfig(selectors), selectors );
	 		paged = 1;
	 		data.scene_id = $(".scene_id").val() ;
	 		data.node_id = null ;
	 		$(".container").empty();
	 		$(".no-data").hide();
	 		getData(paged++);
		});
		
		$(".node-select").change(function(){
			paged = 1;
	 		data.node_id = $(".node-select").val() ;
	 		$(".container").empty();
	 		$(".no-data").hide();
	 		getData(paged++);
		})
		
		function getData(n){
			postAjax(localUrl+"/page/alarm.json?paged="+n, data,function(data){
				if(isOK(data)){
					var dataT = data.data.data ;
					for(var i=0;i<dataT.length;i++){
						$(".container").append( $("#template").html().format(dataT[i].sensor_name,dataT[i].data.iot_alarm_process_status
								,dataT[i].description,
								dataT[i].id ));					
					}
					if(data.data.totalPage > data.data.paged){
						loading = false;					
					}else{
						loading =true ;	
					}
				}else{
					loading =true ;	
				}
				// 传data就可以，分页的
				pagerinit(data,".container");
			});	
		}
		
		// 查询条件
		var data = {
			iot_alarm_process_status:46
		} ;
		var paged = 1;
		getData(paged++);
		var loading = false;  //状态标记
		$(".body-container").infinite().on("infinite", function() {
			if (loading)
				return;
			loading = true;
			setTimeout(function() {
				// 获取商品信息
				getData(paged++);
			}, 500); 
		});
	})
</script>
</html>